<template>
  <el-container>
    <!-- <el-header style="background-color: #000000;">员工管理</el-header> -->
    <el-main>
      <el-form :inline="true" :model="pageObject" class="demo-form-inline">
        <el-form-item label="部门名称">
          <el-input v-model="pageObject.departmentName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button type="primary" @click="add">新增部门</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" stripe style="width: 100%;" >
        <!-- 列 -->
        <el-table-column label="部门名称" prop="departmentName" width="180" align="center"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <!-- slot-scope 插槽属性，用来获取迭代变量 -->
          <template slot-scope="x">
            <el-button type="success" size="mini" @click="update(x.row)">编辑</el-button>
            <el-button type="warning" size="mini" @click="del(x.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageObject.page" :page-sizes="[5, 10, 20, 40]" :page-size="5"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!-- 新增、修改弹出框 -->
      <el-dialog :title="title" width="50%" :visible.sync="isShow">
        <el-form :model="department" label-width="80px">
          <el-form-item label="部门名称">
            <el-col :span="8">
              <input type="hidden" v-model="department.departmentId">
              <el-input v-model="department.departmentName"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        list: [], //当前页集合
        totalPage: "", //总页数
        total: 0, //总条数
        pageObject: { //分页对象
          page: 1,
          row: 5,
          departmentName: "",
        },
        title: "新增",
        isShow: false,
        isOption: true,
        department: {
          departmentId: 0,
          departmentName: "",
        },
      }
    },
    methods: {
      //加载数据
      loadData() {
        var self = this;
        this.$http.get("http://localhost:8080/department/queryDepartment", {
            params: this.pageObject
          })
          .then(function(rs) {
            if (rs.data.success) {
              self.list = rs.data.data.list;
              console.log(self.list);
              self.totalPage = rs.data.data.totalPage;
              self.total = rs.data.data.total;
            }
          })
      },
      // 下拉框触发事件
      handleSizeChange(v) {
        this.pageObject.row = v;
        this.loadData();
      },
      handleCurrentChange(v) {
        this.pageObject.page = v;
        this.loadData();
      },
      //打开新增弹窗
      add() {
        this.isShow = true;
        this.title = "新增";
      },
      //打开修改弹窗
      update(obj) {
        this.isShow = true;
        this.title = "修改";
        this.department=obj;
      },
      save() {
        console.log(this.department);
        this.$confirm("你确定要" + this.title + "吗", "提示")
          .then(() => {
            var url = "";
            if (this.title == "新增") {
              url = "http://localhost:8080/department/insertDepartment";
            } else {
              url = "http://localhost:8080/department/updateDepartment";
            }
            var self = this;
            this.$http.get(url, {
                params: this.department
              })
              .then(function(rs) {
                self.$message(rs.data.info);
                if (rs.data.success) {
                  //关闭弹窗
                  self.isShow = false;
                  //刷新数据
                  self.loadData();
                }
              })
          })
          .catch(() => {
            this.$message('您已取消操作');
          })
      },
      del(obj) {
        var self = this;
        this.$confirm("你确定要删除吗", "提示")
          .then(() => {
            //ajax请求
            self.$http.get("http://localhost:8080/department/deleteDepartment", {
                params: obj
              })
              .then(function(rs) {
                self.$message(rs.data.info);
                if (rs.data.success) {
                  //刷新数据
                  self.loadData();
                }
              })
          })
          .catch(() => {
            this.$message('您已取消操作');
          });
      }
    },
    mounted() {
      this.loadData();
    }
  }
</script>

<style>
</style>
